<template>
	<div class="menu1-container">
		<div class="menu1">
			<div class="between">
				<div class="flex title" style="font-weight: bold;">
					{{$t("更多获客工具")}}
					<div class="span" v-if="lang=='zh'">New</div>
				</div>
				<div class="flex" @click="go()">
					<div style="color: #999;font-size: 24rpx;">{{$t("查看更多")}}</div>
					<image src="/static/right3.png" style="width: 15rpx;margin-left: 8rpx;" mode="widthFix"></image>
				</div>
			</div>
			<div class="menu-list">
				<div class="item" v-for="item in icons" @click="go()">
					<div class="icon">
						<image :src="item.icon" style="width: 100%;" mode="widthFix"></image>
					</div>
					<div class="title" v-if="lang=='zh'">{{$t(item.title)}}</div>
					<div class="title" v-else style="height: 32px;">{{$t(item.title)}}</div>
					<!-- <image :src="item.ru" v-else mode="widthFix" style="width: 100%;height: auto;margin-top: 16rpx;">
					</image> -->
				</div>
				<div class="item"></div>
			</div>

		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				lang: uni.getStorageSync("lang"),
				icons: [{
						title: "主动获客",
						icon: this.serverImageUrl("/new/ico_zdhk.png"),
						ru: this.serverImageUrl("/new/ico_zdhk2.png"),
					},
					{
						title: "智能核算",
						icon: this.serverImageUrl("/new/ico_znhs.png"),
						ru: this.serverImageUrl("/new/ico_znhs2.png"),
					},
					{
						title: "独立站",
						icon: this.serverImageUrl("/new/ico_dlz.png"),
						ru: this.serverImageUrl("/new/ico_dlz2.png"),
					},
					{
						title: "境外电销",
						icon: this.serverImageUrl("/new/ico_jwdx.png"),
						ru: this.serverImageUrl("/new/ico_jwdx2.png"),
					},
					{
						title: "同声传译",
						icon: this.serverImageUrl("/new/ico_tscy.png"),
						ru: this.serverImageUrl("/new/ico_tscy2.png"),
					},
					{
						title: "Ai小助手",
						icon: this.serverImageUrl("/new/ico_AIzs.png"),
						ru: this.serverImageUrl("/new/ico_AIzs2.png"),
					},
					{
						title: "跨境指导",
						icon: this.serverImageUrl("/new/ico_zdhk.png"),
						ru: this.serverImageUrl("/new/ico_zdhk2.png"),
					},
				]
			}
		},
		methods: {
			go() {
				uni.showToast({
					icon:"none",
					title:this.$t("暂未开放")
				})
			}
		}
	}
</script>

<style lang="scss">
	.menu-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin: 0 -30rpx;
		margin-top: 16rpx;

		.item {
			width: 25%;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			margin: 16rpx 0;
		}

		.icon {
			width: 82rpx;
			height: 82rpx;
		}

		.title {
			font-size: 22rpx;
			color: #3d3d3d;
			margin-top: 16rpx;
			text-align: center;
		}
	}

	.title {
		font-size: 26rpx;
		color: #3d3d3d;

		.span {
			width: 64+10rpx;
			height: 26+10rpx;
			border-radius: 15rpx 30rpx 30rpx 0rpx;
			background: #FE4648;
			color: #fff;
			font-size: 22rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-left: 16rpx;
		}
	}

	.menu1-container {
		width: 100%;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		background-color: #f5f5f5;
	}

	.menu1 {
		width: 100%;
		background-color: #fff;
		padding: 30rpx;
		box-sizing: border-box;
		border-radius: 26rpx;
	}

	.flex {
		display: flex;
		align-items: center;
	}

	.between {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
</style>